<template>
  <view class="register">
    <view class="con">
      <image src="@/static/logo.png" />
      <!-- 登录 -->
      <view class="login-form">
        <view :class="['item',errorTips==1? 'error':'']">
          <view class="account">
            <text class="input-item">
              账号
            </text>
            <input type="text" data-type="account" placeholder-class="inp-palcehoder" placeholder="请输入手机号码"
              @input="getInputVal" @blur="verifyCanGetCode">
          </view>
          <view v-if="errorTips==1" class="error-text">
            <text class="warning-icon">
              !
            </text>
            请输入正确的手机号！
          </view>
        </view>
        <view :class="['item',errorTips==2? 'error':'']">
          <view class="account">
            <text class="input-item">
              密码
            </text>
            <input type="password" data-type="password" placeholder-class="inp-palcehoder" placeholder="请输入密码"
              @input="getInputVal" @blur="verifyCanGetCode">
          </view>
          <view v-if="errorTips==2" class="error-text">
            <text class="warning-icon">
              !
            </text>
            请输入密码！
          </view>
        </view>
        <view :class="['item',errorTips==3? 'error':'']">
          <view class="account">
            <input class="smsInput" type="number" data-type="smsCode" placeholder-class="inp-palcehoder"
              placeholder="请输入短信验证码" @input="getInputVal">

            <button class="get-code" :disabled="!canGetCode" @tap="getCode">{{codeBtnText}}
            </button>
          </view>
          <view v-if="errorTips==3" class="error-text">
            <text class="warning-icon">
              !
            </text>
            请输入正确的短信验证码！
          </view>
        </view>
        <view class="operate">
          <view class="to-register" @tap="toLogin">
            已有账号？
            <text>去登录></text>
          </view>
        </view>
      </view>

      <view>
        <button class="authorized-btn" @tap="register">
          注册
        </button>
        <button class="to-idx-btn" @tap="toIndex">
          回到首页
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  import http from '../../utils/http';



  /**
   * 生命周期函数--监听页面显示
   */
  onShow(() => {
    // 头部导航标题
    uni.setNavigationBarTitle({
      title: '用户注册'
    })
  })

  const principal = ref('') // 账号
  const credentials = ref('') // 密码
  const smsCode = ref('') //短信验证码
  const canGetCode = ref(false) // 是否可以获取验证码
  const codeBtnText = ref('获取验证码') // 获取验证码按钮文字


  /**
   * 输入框的值
   */
  const getInputVal = (e) => {
    const type = e.currentTarget.dataset.type
    if (type == 'account') {
      principal.value = e.detail.value
    } else if (type == 'password') {
      credentials.value = e.detail.value
    } else if (type == 'smsCode') {
      smsCode.value = e.detail.value
    }
  }


  const errorTips = ref(0) // 输入错误提示:  1账号输入  2密码输入 3验证码为空
  /**
   * 验证是否能发送短信验证码
   *
   */
  const verifyCanGetCode = () => {
    const phoneVerify = /0?(13|14|15|18|17)[0-9]{9}/;
    if (!phoneVerify.test(principal.value)) {
      errorTips.value = 1
    } else if (credentials.value.length == 0) {
      errorTips.value = 2
    } else {
      errorTips.value = 0
      canGetCode.value = true
    }
  }
  const countDown = ref(60) // 倒计时
  // 发送短信验证码
  const getCode = () => {
    if (canGetCode.value) {

      http.request({
        url: '/user/getRegCode',
        method: 'get',
        data: {
          phone: principal.value,
        }
      }).then((res) => {
        if (res.code == 1) {
          canGetCode.value = false;
          const timer = setInterval(() => {
            if (countDown.value > 0) {
              countDown.value--;
              codeBtnText.value = `重新发送(${countDown.value})`; // 更新codeBtnText的文案
            } else {
              clearInterval(timer); // 倒计时结束后清除定时器
              canGetCode.value = true; // 重置获取验证码状态
              codeBtnText.value = "重新发送"; // 重置codeBtnText的文案
            }
          }, 1000);
        }
      })

    }
  };

  //校验验证码
  const verifyCode = () => {

  }

  // 注册
  const register = () => {
    const smsCodeVerify = /^\d{6}$/
    if (!smsCodeVerify.test(smsCode.value)) {
      errorTips.value = 3
      return
    }
    http.request({
        url: '/user/register',
        method: 'post',
        data: {
          phone: principal.value,
          code: smsCode.value,
          password: credentials.value,
        }
      })
      .then((res) => {
        if (res.code == 1) {
          uni.showToast({
            title: '注册成功',
            icon: 'success'
          })
          uni.navigateTo({
            url: '/pages/accountLogin/accountLogin'
          })
        }else{
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
  }

  /**
   * 去登陆
   */
  const toLogin = () => {
    uni.navigateTo({
      url: '/pages/accountLogin/accountLogin'
    })
  }

  /**
   * 回到首页
   */
  const toIndex = () => {
    uni.switchTab({
      url: '/pages/index/index'
    })
  }
</script>

<style lang="scss" scoped>
  @import "./register.scss";
</style>
